import React, { useState } from 'react';
import { Form, Input, DatePicker, Button, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
import { WeeklyReportQueryParams } from '../types';
import style from './index.less';

interface FilterBarProps {
  initialValues: WeeklyReportQueryParams;
  onSearch: (values: WeeklyReportQueryParams) => void;
}

const { RangePicker } = DatePicker;

const FilterBar: React.FC<FilterBarProps> = ({ initialValues, onSearch }) => {
  const [form] = Form.useForm();
  const [isAdvancedSearch, setIsAdvancedSearch] = useState(false);

  // 设置默认日期范围
  const defaultDateRange = [
    dayjs('2025-04-28'),
    dayjs('2025-05-04')
  ];

  const handleSearch = () => {
    form.validateFields().then(values => {
      // 处理日期范围格式
      if (values.dateRange && Array.isArray(values.dateRange)) {
        values.dateRange = values.dateRange.map((date: Dayjs) => 
          date.format('YYYY-MM-DD')
        ).join(' ~ ');
      }
      onSearch(values);
    });
  };

  const handleReset = () => {
    form.resetFields();
  };

  const handleExport = () => {
    const values = form.getFieldsValue();
    console.log('导出数据', values);
    // 这里应该调用导出接口
  };

  return (
    <div className={style['pg2-filter-bar']}>
      <Form 
        form={form}
        initialValues={{
          ...initialValues,
          dateRange: defaultDateRange
        }}
        className={style['filter-bar-form']}
        layout="inline"
      >
        <Form.Item 
          label="请选择计划上线时间段" 
          name="dateRange"
          className={style['filter-bar-item']}
        >
          <RangePicker 
            style={{ width: 230 }}
            format="YYYY-MM-DD"
          />
        </Form.Item>
        
        <Form.Item 
          name="projectId" 
          className={style['filter-bar-item']}
        >
          <Input 
            placeholder="请输入项目编号" 
            style={{ width: 140 }}
          />
        </Form.Item>
        
        <Form.Item 
          name="teamName" 
          className={style['filter-bar-item']}
        >
          <Input 
            placeholder="请输入团队名称" 
            style={{ width: 140 }}
          />
        </Form.Item>
        
        <Form.Item 
          name="confirmDate" 
          className={style['filter-bar-item']}
        >
          <DatePicker 
            placeholder="选择日期" 
            style={{ width: 120 }}
          />
        </Form.Item>
        
        <Form.Item 
          name="planDate" 
          className={style['filter-bar-item']}
        >
          <DatePicker 
            placeholder="选择日期" 
            style={{ width: 120 }}
          />
        </Form.Item>
        
        <Form.Item 
          name="manager" 
          className={style['filter-bar-item']}
        >
          <Input 
            placeholder="请输入项目经理/工号" 
            style={{ width: 140 }}
          />
        </Form.Item>
        
        <Space className={style['filter-bar-actions']}>
          <Button type="primary" onClick={handleSearch}>
            查询
          </Button>
          <Button className={style['export-btn']} onClick={handleExport}>
            导出Excel
          </Button>
          <Button
            className={style['filter-btn']}
            icon={<SearchOutlined />}
            onClick={() => setIsAdvancedSearch(!isAdvancedSearch)}
          />
        </Space>
      </Form>
    </div>
  );
};

export default FilterBar; 